<%--
  Created by IntelliJ IDEA.
  User: lichengming
  Date: 2017/6/15
  Time: 下午12:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/resources.jsp" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>用户管理</title>

    <link rel="stylesheet" href="/starCms/css/upload/webuploader.css">
    <link rel="stylesheet" href="/starCms/css/tree/bootstrap-treeview.min.css">
    <script src="/starCms/js/jquery.md5.js"></script>
    <script src="/starCms/js/tree/bootstrap-treeview.min.js"></script>

    <style type="text/css">

        .ems_add_gbtn {
            flex: auto;
            display: flex;
            justify-content: flex-end;
        }

        .ems_add_heading {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 5px 10px;
        }
        .ems_form_reset {
            margin-left: 10px;
        }

        .ems_form_checkbox_g>label {
               width: 120px;
               margin-right: 10px;
        }

        .ems_form_checkbox_g>label>a {
            display: none;
            text-decoration: none;
        }

        #add_new_role>a {
            text-decoration: none;
        }

        .well_close {
            position: absolute;
            top: 10px;
            right: 10px;
        }

        #paramsList .well {
            position: relative;
        }

        #returnParamList .well {
            position: relative;
        }
    </style>
</head>
<body>
<div class="ems_form">
    <div class="panel panel-default">
        <div class="panel-heading ems_add_heading">
            <h3 class="panel-title" style="color: inherit;">接口新增</h3>

            <div class="ems_add_gbtn">
                <button type="button" class="btn btn-info go_back" style="margin-right: 10px;">
                    <span class="glyphicon glyphicon-chevron-left"></span> 返回上一页
                </button>
                <button type="button" class="btn btn-primary ems_form_submit">
                    <span class="glyphicon glyphicon-check"></span> 保存
                </button>
                <button type="button" class="btn btn-default ems_form_reset">
                    <span class="glyphicon glyphicon-shopping-cart"></span> 重置
                </button>
            </div>
        </div>

        <form class="form-horizontal ems_internal_form">
            <div class="form-group">
                <label class="col-sm-3 control-label">接口名：</label>
                <div class="col-sm-6">
                    <input type="text" name="name" required value="${interfaceRecord.name}" id="name" class="form-control" placeholder="必填，长度不超过32">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">上下文：</label>
                <div class="col-sm-6">
                    <input type="text" name="context_path" required value="${interfaceRecord.context_path}" id="context_path" class="form-control" placeholder="必填,不超过32">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">URI：</label>
                <div class="col-sm-6">
                    <input type="text" required name="url" id="url" value="${interfaceRecord.url}" class="form-control" placeholder="必填，长度不超过64">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">系统：</label>
                <div class="col-sm-6">
                        <select id="systemName_select" name="systemName_code" onchange="getModule()" class="form-control selectpicker">
                            <option value="-1">请选择</option>
                            <c:forEach items="${system}" var="list" varStatus="status">
                                <option id="systemName" value="${list.id}">${list.system_name }</option>
                            </c:forEach>
                        </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">模块：</label>
                <div class="col-sm-6">
                        <select id ="moduleName_select" name="moduleName_code" class="form-control selectpicker">
                            <option value="-1">请选择</option>
                        </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">参数：</label>
                <div class="col-sm-6">
                    <button class="btn btn-default" id="addParam" type="button" data-toggle="collapse" data-target="#paramsList" aria-expanded="false" aria-controls="paramsList">
                        点击添加参数
                    </button>
                    <div class="collapse" style="margin-top: 10px" id="paramsList">
                        <c:forEach items="${interfaceRecord.paramList}" var="parameter" >
                            <div class="well">
                                <button type="button" class="close well_close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">中文名：</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" value="${parameter.param_name_zh}" name="param_name_zh" placeholder="必填，长度不能超过32">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">参数名：</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" value="${parameter.param_name}" name="param_name" placeholder="必填，长度不能超过32">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">类型：</label>
                                    <div class="col-sm-8">
                                        <select name="param_type" select-value="${parameter.param_type}" class="form-control">
                                            <option value="字符串">字符串</option>
                                            <option value="整形">整形</option>
                                            <option value="长整形">长整形</option>
                                            <option value="浮点型">浮点型</option>
                                            <option value="数组">数组</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">是否必须：</label>
                                    <div class="col-sm-8">
                                        <label class="radio-inline">
                                            <input type="radio" name="${parameter.isNeedName}" checked-value="${parameter.is_need}" value="1"> 是
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="${parameter.isNeedName}" checked-value="${parameter.is_need}" value="0"> 否
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">说明：</label>
                                    <div class="col-sm-8">
                                        <textarea class="form-control" name="description" placeholder="长度不能超过128" rows="3">${parameter.description}</textarea>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                        <button type="button" id="addMoreParams" class="btn btn-default">继续添加</button>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">返回值：</label>
                <div class="col-sm-6">
                    <button class="btn btn-default" id="addReturnParam" type="button" data-toggle="collapse" data-target="#returnParamList" aria-expanded="false" aria-controls="returnParamList">
                        点击添加返回参数
                    </button>
                    <div class="collapse" style="margin-top: 10px" id="returnParamList">
                        <c:forEach items="${interfaceRecord.returnParamList}" var="returnParam">
                            <div class="well">
                                <button type="button" class="close well_close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">参数名：</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" value="${returnParam.param_name}" name="param_name" placeholder="必填，长度不能超过32">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">类型：</label>
                                    <div class="col-sm-8">
                                        <select name="param_type" class="form-control">
                                            <option value="字符串">字符串</option>
                                            <option value="整形">整形</option>
                                            <option value="长整形">长整形</option>
                                            <option value="浮点型">浮点型</option>
                                            <option value="数组">数组</option>
                                            <option value="JSON对象">JSON对象</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">说明：</label>
                                    <div class="col-sm-8">
                                        <textarea class="form-control" name="description" placeholder="长度不能超过128" rows="3">${returnParam.description}</textarea>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                        <button type="button" id="addMoreReturnParams" class="btn btn-default">继续添加</button>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">返回JSON：</label>
                <div class="col-sm-6">
                    <textarea class="form-control" id="retJson" placeholder="" rows="4">${interfaceRecord.ret_json}</textarea>
                </div>
            </div>
        </form>
    </div>
</div>
<script>

    var id = "${interfaceRecord.id}";

    var systemId;
    $("#systemName_select").change(function () {
        systemId = $(this).val();
    });

    var moduleId;
    $("#moduleName_select").change(function () {
        moduleId = $(this).val();
    });
    $.validator.setDefaults({
        //认证成功
        submitHandler: function(form) {
            var data = {};
            data["name"] = $.trim($("#name").val());
            data["url"] = $.trim($("#url").val());
//            data["system_name"] = $('#systemName').val();
//            data["module_name"] = $.trim($("#module_name").val());
            data["system_id"] = systemId;
            data["module_id"] = moduleId;
            data["param_list"] = JSON.stringify(getParamList());
            data["return_param_list"] = JSON.stringify(getReturnParamList());
            data["ret_json"] = $.trim($("#retJson").val());
            data["id"] = id;
            data["context_path"] = $.trim($("#context_path").val());
            saveInterface(data);
        }
    });

    function getParamList() {
        var paramList = [];
        $("#paramsList .well").each(function (index,val) {
            var param = {};
            param['type'] = 1;
            param['param_name_zh'] = $.trim($(val).find("input[name=param_name_zh]").val());
            param['param_name'] = $.trim($(val).find("input[name=param_name]").val());
            param['param_type'] = $(val).find("select option:selected").val();
            param['is_need'] = $(val).find("input[type=radio]:checked").val();
            param["description"] = $(val).find("textarea:first").val();
            paramList.push(param);
        });
        return paramList;
    }

    function getReturnParamList() {
        var paramList = [];
        $("#returnParamList .well").each(function (index,val) {
            var param = {};
            param['type'] = 2;
            param['param_name'] = $.trim($(val).find("input[name=param_name]").val());
            param['param_type'] = $(val).find("select option:selected").val();
            param["description"] = $(val).find("textarea:first").val();
            paramList.push(param);
        });
        return paramList;
    }


    function saveInterface(data) {
        $.emsAjax({
            url:"/starCms/interface/save",
            type:"POST",
            data:data,
            success:function (resp) {
                if (resp.status == "000") {
                    $.alert(resp.message,null,null,function () {
                        window.location.href = "/starCms/interface/index"
                    })
                }else {
                    $.errorAlert(resp.message);
                }
            }
        })
    }

    function deleteParam(closeTab) {

        closeTab.on("click",function () {
            if ($("#paramsList").find(".well").length > 1) {
                var parent = $(this).parents(".well");
                parent.fadeOut("normal",function () {
                    parent.remove();
                })
            }else {
                $("#addParam").click();
            }
        });
    }

    function deleteReturnParam(closeTab) {

        closeTab.on("click",function () {
            if ($("#returnParamList").find(".well").length > 1) {
                var parent = $(this).parents(".well");
                parent.fadeOut("normal",function () {
                    parent.remove();
                })
            }else {
                $("#returnParamList").find("input,textarea,select").val("");
                $("#addReturnParam").click();
            }
        });
    }

    function editInit() {
        $("#system_name").val("${interfaceRecord.system_name}");
        $("#module_name").val("${interfaceRecord.module_name}");

        $("#paramsList select").each(function (index,value) {
            $(value).val($(value).attr("select-value"))
        })

        $("#paramsList input[type=radio]").each(function (index,val) {
            if ($(val).val() == $(val).attr("checked-value")) {
               $(val).attr("checked","true");
            }
        });

        $("#addParam").click();
        $("#addReturnParam").click();
    }

    $(function () {

        $("form").each(function (index,val) {
            $(val)[0].reset();
        });

        //表单验证
        $(".ems_internal_form").validate();

        //删除按钮
        deleteParam($("#paramsList").find(".well").find("button"));
        deleteReturnParam($("#returnParamList").find(".well").find("button"))

        $(".ems_form_submit").on("click",function () {
            var form = $(this).parents(".ems_form").find("form:first");
            form.submit();
        });

        $(".ems_form_reset").on("click",function () {
            $(this).parents(".ems_form").find("form:first")[0].reset();
        })

        //添加参数
        $("#addMoreParams").on("click",function () {
            var lastDiv = $("#paramsList").find(".well:last");
            lastDiv.after(lastDiv.prop("outerHTML"));
            lastDiv = $("#paramsList").find(".well:last");
            var closeTab = lastDiv.find("button");
            var randomName = Math.random();
            lastDiv.find("input[type=radio]").attr("name",randomName);
            lastDiv.find("input:not(input[type=radio]),textarea").val("");

            var $radio = lastDiv.prev().find("input[type=radio]");
            $radio.each(function (index,val) {
                if ($(val).val() == $(val).attr("checked-value")) {
                    $(val).prop("checked","checked");
                }
            })
            deleteParam(closeTab);
        });

        //添加返回值
        $("#addMoreReturnParams").on("click",function () {
            var lastDiv = $("#returnParamList").find(".well:last");
            lastDiv.after(lastDiv.prop("outerHTML"));
            lastDiv = $("#returnParamList").find(".well:last");
            lastDiv.find("input,textarea").val("");
            var closeTab = lastDiv.find("button");
            deleteReturnParam(closeTab);
        });
        if (id) {
            editInit();
        }
    })
</script>

<script>


    $("#systemName_select").change(function () {

//        alert($(this).val());
        var systemId = $(this).val();
        var data = {};
        data["systemId"] = systemId;
        $.emsAjax({
            url:"/starCms/interface/getModuleNameList",
            data:data,
            type:"POST",
            success:function (resp) {
                if (resp.status=="000") {
                    var moduleName = $("#moduleName_select");
                    //清空模块数据
                    $("#moduleName_select").empty();
//                    if(systemId==-1){
//                        var emptyStr = '<option value="-1">请选择</option>';
//                        moduleName.append(emptyStr);
//                    }
                    var str = '';
                    var data = resp.data;
                    str = '<option value="-1">请选择</option>';
                    for(var o in data) {
                        str += '<option value="'+data[o].id+'">'+data[o].module_name+'</option>';
                    }
                    moduleName.append(str);
                }else {
                    $.errorAlert("获取数据失败");
                }
            }
        });
    });
</script>

<%--返回上一页按钮单击事件--%>
<script>
    $(".go_back").on("click",function () {
        window.history.go(-1);
    })
</script>
</body>
</html>
